<template>
  <div class="main">
      <div class="box">
          <div class="left">
              <span class="van-icon van-icon-search"></span>
              <input v-model="searchText" type="text" placeholder="请输入搜索关键词" >
              <span @click="clearText" v-show="searchText.length > 0" class="mintui mintui-field-error"></span>
          </div>
          <div v-if="!flag"  @click="$router.push('/search')" class="right">搜索</div>
          <div v-if="flag"  @click="$router.push('/home')" class="right">返回</div>
      </div>
  </div>
</template>

<script>
export default {
    props:['flag'],
    data(){
        return {
            searchText:''
        }
    },
    methods:{
        clearText(){
            this.searchText = ''
        },
    }
}
</script>

<style scoped>
.main{
    background: white;
    border-bottom: 1px solid #bfa;
}
.box{
    padding: 8px 15px;
    display: flex;
    height: 5vh;
    line-height: 5vh;
    justify-content: space-between;
}
.left{
    display: flex;
    width: 80%;
    background: #f7f8fa;
}
span{
    width: 10%;
    line-height: 5vh;
}
input{
    width: 80%;
    border: none;
    background: #f7f8fa;
}
input::-webkit-input-placeholder {
    color: #aab2bd;
    font-size: 14px;
}



.right{
    width: 15%;
    font-size: 14px;
}
</style>